/* 定义文字滚动动画 */
@keyframes scroll-text {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}

/* 基础容器样式 */
.floating-player-container {
  position: fixed;
  bottom: 5rem;
  left: 1rem; /* 展开时的位置 */
  z-index: 1000;
  min-width: 3.125rem;
  max-width: 3.75rem;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);

  /* [核心修改] 使用 transform 进行动画，性能更好 */
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-player-container.collapsed {
  /* 将容器向左移动 45px。
       容器宽度 60px + 初始 left 15px = 75px 可见空间。
       向左移 45px，意味着容器的右边缘现在位于 30px 的位置，
       这使得附着在其右侧的“把手”按钮可以悬停在屏幕边缘。
    */
  transform: translateX(-4.75rem);
}

/* [新增] 当收起时，隐藏图标和滚动文字 */
.floating-player-container.collapsed .song-info-scroller,
.floating-player-container.collapsed .player-icon-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s linear, visibility 0.1s linear;
}

/* --- [新增] 切换“把手”按钮样式 --- */
.player-toggle-handle {
  position: absolute;
  /* 定位在容器的右侧边缘之外 */
  top: 50%;
  left: 100%;
  transform: translateY(-50%);

  width: 1.125rem;
  height: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(0.25rem);
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  box-shadow: 0.25rem 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
  cursor: pointer;
  color: #555;
  transition: color 0.2s ease;
  z-index: 1001; /* 确保它始终可见 */
}

/* [新增] 可交互的封面区域 */
.cover-section-interactive {
  position: relative;
  width: 3.125rem;
  height: 3.125rem;
  cursor: pointer;
  /* 明确这是可点击的 */
  border-radius: 50%;
  /* 确保悬浮效果不会超出圆形 */
  transition: transform 0.2s ease-out;
  align-self: center;
  /* 让封面居中 */
}

.cover-section-interactive:hover {
  transform: scale(1.1);
  /* 添加一个简单的交互动效 */
}

.cover-section-interactive .ant-avatar {
  width: 100%;
  height: 100%;
}

/* [修改] 图标覆盖层样式 */
.player-icon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  /* 匹配头像的圆形 */

  /* [关键] 让它永久可见 */
  opacity: 1;
  pointer-events: auto;
  /* 确保可交互 */
}

/* [新增] 歌曲信息滚动容器 */
.song-info-scroller {
  width: 100%;
  overflow: hidden;
  /* 隐藏超出部分，这是实现滚动效果的关键 */
  white-space: nowrap;
  /* 强制文字不换行 */
}

/* [新增] 滚动的文字本身 */
.song-info-text {
  display: inline-block;
  /* 必须是 inline-block 才能应用 transform */
  padding-left: 100%;
  /* 让文字从容器右侧开始滚动，实现无缝效果 */

  /* 应用动画：动画名 持续时间 线性无限循环 */
  animation: scroll-text 14s linear infinite;
  font-size: 0.8125rem;
  color: #555;
}

/* 鼠标悬浮时暂停滚动，方便阅读 (桌面端体验优化) */
.floating-player-container:hover .song-info-text {
  animation-play-state: paused;
}
